<template>
    <div class="container">
        <my-search :fields="fieldsList" :baseNumber="4" @onSearch="searchForm" @onReset="resetForm" :selectIsAddAll="false" />
        <div class="btn">

            <el-button type="info" plain size="mini" @click="uploadFile()">
                <svg-icon icon-class="upload" />
                导入</el-button>

        </div>
        <div class="table-list">
            <my-table v-loading="loading" ref="myEltable" style="width: 100%" row-key="id" :showsummary="false" :columns="tableColumns" :tableData="tableDatas" :pageNum="queryObj.pageNo" :pageSize="queryObj.pageSize" :totalPage="total" :height="$store.state.app.windowHeight - 220" max-height="660px" :current="false" @onCurrentChange="changepageNo" @onPageSizeChange="changePageSize" highlight-current-row :ifSelect="false" @onSelectionChange="onSelectionChange" />
            <!-- <el-table v-loading="loading" border size="mini" stripe fit :data="tableDatas" style="width: 100%" :height="$store.state.app.windowHeight - 190">
                <el-table-column type="index" label="序号" width="60" align="center" :index="currIndex">
                </el-table-column>
                <el-table-column show-overflow-tooltip v-for="(item,key) in tableColumns" :prop="item.prop" :label="item.label" :key="key" :min-width="item.minWidth" align="center">
                </el-table-column>
            </el-table>
            <el-pagination style="text-align:right;padding: 8px 16px 8px 0;
    background: #fff;" background :current-page="queryObj.pageNo" :page-size="queryObj.pageSize" :page-sizes="[20, 50, 80, 100, 200, 500]" :total="total" :pager-count="7" layout="total, sizes, prev, pager, next, jumper" @current-change="changepageNo" @size-change="changePageSize"></el-pagination> -->

        </div>

        <!-- 上传组件隐藏 -->
        <el-upload style="display:none;" ref="uploadTemplate" class="upload-demo" :before-upload="beforeUpload" action drag :show-file-list="false" :http-request="httpRequest" :multiple="false" accept=".xls,.csv,.xlsx">
            <el-button size="small" type="primary" ref="uploadTemplate_btn">点击上传</el-button>
        </el-upload>

          <el-dialog :title="sxmc" :visible.sync="dialogVisible" append-to-body width="600px" destroy-on-close top="6vh">
            <div  class="fileView">
                <div ref="fileView">
                   {{content}}
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="mini">关闭</el-button>
                
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { sxjkQueryList, querySxlx, upload } from '@/api/znjk/znjk'

export default {
    name: 'xsjk-list',

    data() {
        return {
            loading: false,
              dialogVisible: false,
            fieldsList: [
                {
                    label: '纳税人名称',
                    field: 'qymc',
                    type: 'text',
                    value: '',

                },

                {
                    label: '重大事项类型',
                    field: 'sxmc',
                    type: 'select',
                    options: [
                    ],
                    value: ''
                },


            ],
            //右侧表格开始
            tableColumns: [
                {
                    label: '纳税人名称',
                    prop: 'qymc',
                    align: 'center',
                    minWidth: 120,

                },

                {
                    label: '重大事项类型',
                    prop: 'sxmc',
                    align: 'center',
                    minWidth: 80,
                },
                {
                    label: '事项内容',
                    prop: 'content',
                    align: 'center',
                    minWidth: 200,
                    render: (h, params) => {
                        // onClick={() => this.upload(params.row)}
                        return (
                            <div class="underline-text" onClick={() => this.showContent(params.row)}>
                                {params.row.content.slice(0, 44) + '...'}
                            </div>
                        );
                    }
                },
            ],
            tableDatas: [

            ]
            , queryObj: {
                qymc: '',
                sxmc: '',


                pageNo: 1,
                pageSize: 20
            },
            total: 0,
            selectedRows: [],
           content:'',
           sxmc:''
        }
    },

    mounted() {
        this.getTypeData();

    },
    methods: {
        showContent(row) {
          this.content = row.content
          this.sxmc = row.qymc+row.sxmc
          this.dialogVisible = true
        },
        searchForm(params) {
            console.log(params, '查询条件');
            this.queryObj.qymc = params.qymc || '';
            this.queryObj.sxmc = params.sxmc || '';

            this.getTableData();
        },
        resetForm() {
            for (let key in this.queryObj) {
                if (key == 'pageNo') {
                    this.queryObj[key] = 1;
                } else if (key == 'pageSize') {
                    this.queryObj[key] = 20;
                } else {
                    this.queryObj[key] = '';
                }
            }
            this.tableDatas = []
            this.total = 0
        },
        getTypeData() {
            querySxlx({}).then(res => {
                if (res.code == 200) {
                    this.fieldsList[1].options = res.data.map(item => {
                        return {
                            label: item,
                            value: item
                        }
                    })
                }
            })
        },
        getTableData() {
            this.loading = true;
            let params = {
                qymc: this.queryObj.qymc,
                sxmc: this.queryObj.sxmc,
                // yxbz: 'Y',
                // status: 'Y',
                pageNum: this.queryObj.pageNo,
                pageSize: this.queryObj.pageSize,
            }
            sxjkQueryList(params).then(res => {
                console.log(res)
                this.loading = false;
                if (res.code == 200) {
                    this.tableDatas = res.data.records

                    // let ColumnArr = res.data.records[0]
                    // for (let key in ColumnArr) {
                    //     atableColumns.push({
                    //         label: key,
                    //         prop: key,
                    //         align: 'center',
                    //         minWidth: 220,

                    //     })
                    // }
                    // if (this.tableDatas.length > 0) {
                    //     this.tableColumns = atableColumns
                    // }

                    this.total = res.data.total
                }
            })
        },
        changepageNo(currPage) {
            this.queryObj.pageNo = currPage;
            this.getTableData();
        },
        changePageSize(pageSize) {
            this.queryObj.pageSize = pageSize;
            this.getTableData();
        },
        // 表格 多选 事件
        onSelectionChange(selectedRows) {
            this.selectedRows = selectedRows;
        },


        // currIndex(index) {
        //     return index + 1;
        // },
        currIndex(index) {
            return (this.queryObj.pageNo - 1) * this.queryObj.pageSize + index + 1;
            //  pageNum: this.queryObj.pageNo,
            //     pageSize: this.queryObj.pageSize,
        },
        uploadFile() {
            this.$refs['uploadTemplate'].$refs['upload-inner'].handleClick()
        },
        beforeUpload(file, fileList) {
            // console.log('文件状态改变前',file);
            // if(!file.name.includes('.pdf')) {
            //     this.$message.error('请上传pdf格式文件')
            //     return false
            // }

            // if (file.size > 1024 * 1024 * 10) {
            //     this.$message.warning(
            //         "你上传的 \“" + file.name + "\” 文件过大，请上传小于2M的文件。"
            //     );
            //     return false;
            // }

            if (
                file.name.indexOf("@") != -1 ||
                file.name.indexOf("#") != -1 ||
                file.name.indexOf('""') != -1 ||
                file.name.indexOf("<") != -1 ||
                file.name.indexOf(">") != -1 ||
                file.name.indexOf("?") != -1 ||
                file.name.indexOf("|") != -1 ||
                file.name.indexOf("/") != -1 ||
                file.name.indexOf(":") != -1 ||
                file.name.indexOf("`\`") != -1
            ) {
                this.$message.warning(
                    "你上传的 \“" +
                    file.name +
                    "\” 文件有特殊字符，文件名中不可存在特殊字符,请重新上传"
                );
                return false;
            }

            let index = file.name.lastIndexOf(".");
            let Type = file.name.substr(index + 1, file.name.length);
            if (["xls", "csv", "xlsx"].indexOf(Type.toLowerCase()) === -1) {
                this.$message({
                    type: "warning",
                    message: "请上传后缀名为xls,csv,xlsx的附件！",
                });
                return false;
            }
        },
        httpRequest(data) {
            this.loading = true
            let fd = new FormData();
            fd.append("file", data.file);
            upload(fd).then((res) => {
                this.loading = false
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: res.message,
                    });
                    this.getTableData()

                }
            });
        },
        //待处理
        go(name, params) {
            this.$emit('changePage', name, params);
        },



    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    background-color: #fff;
    // padding: 8px;

    .btn {
        padding: 8px 8px 8px 0;
    }

    ::v-deep .undertxt {
        color: rgb(64, 158, 255);
        cursor: pointer;

        &:hover {
            text-decoration: underline;
        }
    }

    ::v-deep .undertxtRed {
        color: rgb(217, 0, 27);
        cursor: pointer;
        text-decoration: underline;
        &:hover {
        }
    }
    ::v-deep .undertxtBlue {
        color: #0000ff;
        cursor: pointer;
        text-decoration: underline;
        &:hover {
        }
    }
}
::v-deep .el-date-editor {
    width: 220px;
}
::v-deep .underline-text {
    text-decoration: underline;
    cursor: pointer;
}
.fileView {
    padding:8px;
    width: 100%;
    height: 45vh;
    // overflow: hidden;
}
</style>
